<template>
  <div class="dashboard-container">
    <el-row :gutter="20">
      <el-col :span="18">
        <el-row :gutter="20">
          <el-col :span="13"><div class="grid-content bg-purple"><OrderStatistics :time-module="timeModule" :information="information" /></div></el-col>
          <el-col :span="11"><div class="grid-content bg-purple-light"><SalesStatistics :time-module="timeModule" /></div></el-col>
          <el-col :span="24"><div class="grid-content bg-purple xiaoshoutongji"><SalesData :time-module="timeModule" /></div></el-col>
        </el-row>
      </el-col>
      <el-col :span="6"><div class="grid-content bg-purple-light "><GoodsHot :time-module="timeModule" /></div></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="17"><div class="grid-content bg-purple teamwork"><Teamwork /></div></el-col>
      <el-col :span="7"><div class="grid-content bg-purple-light"><Abnormal /></div></el-col>
    </el-row>
  </div>
</template>

<script>
import dayjs from '@/utils/dayjs'
import OrderStatistics from './components/OrderStatistics.vue'
import SalesStatistics from './components/SalesStatistics.vue'
import GoodsHot from './components/GoodsHot.vue'
import SalesData from './components/SalesData.vue'
import Teamwork from './components/Teamwork.vue'
import Abnormal from './components/Abnormal.vue'
export default {
  name: 'Dashboard',
  components: { OrderStatistics, SalesStatistics, GoodsHot, SalesData, Teamwork, Abnormal },
  data() {
    return {
      time: {
        start: dayjs().startOf('month').format('YYYY-MM-DD HH:mm:ss'),
        end: dayjs().format('YYYY-MM-DD HH:mm:ss')
      },
      timeModule: {
        start: dayjs().startOf('month').format('YYYY.MM.DD'),
        end: dayjs().format('YYYY.MM.DD')
      },
      information: {
        total: null, // 工单总数
        completedTotal: null, // 完成数
        cancelTotal: null, // 拒绝总数
        progressTotal: null, // 进行中总数
        workerCount: null, // 工作人数
        repair: null, // 是否是运维工单统计
        date: null // 统计的日期
      }
    }
  },
  computed: {
  },
  created() {
    this.$store.dispatch('home/taskReportInfo', this.time)
    this.$store.state.home.time.forEach(item => {
      this.information.total += item.total // 工单总数
      this.information.completedTotal += item.completedTotal // 完成数
      this.information.cancelTotal += item.cancelTotal // 拒绝总数
      this.information.progressTotal += item.progressTotal // 进行中总数
      this.information.workerCount += item.workerCount // 工作人数
      this.information.repair += item.repair // 是否是运维工单统计
      this.information.date += item.date // 统计的日期
    })
    this.$store.commit('home/SET_INFORMATION', this.information)
    this.$store.dispatch('home/orderAmount', this.time)
    this.$store.dispatch('home/orderCount', this.time)
    this.$store.dispatch('home/skuTop', {
      start: dayjs().startOf('month').format('YYYY-MM-DD'),
      end: dayjs().format('YYYY-MM-DD')
    })
    this.$store.dispatch('home/salesFigures', {
      collectType: 1,
      start: dayjs().subtract(7, 'day').format('YYYY-MM-DD'),
      end: dayjs().format('YYYY-MM-DD')
    })
    this.$store.dispatch('home/regionCollect', {
      collectType: 1,
      start: dayjs().subtract(7, 'day').format('YYYY-MM-DD'),
      end: dayjs().format('YYYY-MM-DD')
    })
  }
}
</script>

<style lang="scss" scoped>

.xiaoshoutongji{
  margin-top: 20px;
}
.dashboard {
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.el-row {
    margin-bottom: 10px;
}
.el-col {
    border-radius: 20px;
}

</style>
